
/*盒子模型改为border-box，这样定义长度时包括border和padding（但不包括margin）*/
* {
    box-sizing: border-box;
  }
/*萝莉体下载安装    为了加载速度先注释掉
@font-face{
    font-family: loliti;
    src: url(../font/loliti.ttf);
} 
*/



/*设置背景图片*/
body{
    /*background-color: aqua;*/
    background-image: url(../img/tst.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: grey;
    opacity:1;
    margin: 0px;
}


/*设置标题*/
title{
    font-family: loliti;
}

/*设置段落样式*/
p,li{
    font-family: loliti;
    color: cadetblue;
    text-indent:2em;
}

code{
    color:cyan;
    font-size: larger;
}

/*设置正文标题*/
h1,h2,h3,h4,h5{
    text-align: center;
    font-family: loliti;
    color:linen
}


/*设置超链接*/
a{
    text-decoration:none;
    font-family: loliti;
    color: cadetblue;
}

/*设置表单*/
form{
    text-align: center;
    font-size: larger;
    font-family: loliti;
    color: darkturquoise;
}

dt{
    float: left;
}


.header{
    background-color:white;
    padding: 10px;
    text-align: center;
    opacity: 0.5;
}

.header h1{
    color: black;
}

.header p{
    font-size: smaller;
    text-align:right;
}

.topnav{
    opacity: 0.5;
    background-color:black;
    overflow: hidden;/*隐藏浮动，也就是超出尺寸的部分（设scroll可以出滚动条来调）。比如父元素未设置高度，子元素设置了高度，其他元素会将该块看作无高度而造成页面拥挤，用overflow可以避免*/
}

.topnav a{
    float: left;/*使块不必换行，从左排到右*/
    color: cornsilk;
    text-align: center;
    padding: 16px 30px;
    text-decoration: none;
}

.topnav a:hover{
    background-color: cornsilk;
    color: darkblue;
}

.column{
    float: left;
    padding: 10px;
}

.column h2{
    color:slategrey;
}
.column h5{
    color:black;
}

.column.sides{
    width: 25%;
}

.column.middle{
    width: 50%;
}


.row:after{
    content: "";
    clear: both;
    display: table;
}

@media screen and (max-width: 600px) {
    .column.sides, .column.middle {
      width: 100%;
    }
}

.footer{
    background-color:darkslategray;
    text-align: center;
    color: darkorange;
    padding: auto;
    opacity: 0.5;
}

.card{
    background-color: seashell;
    padding: 20px;
    margin-top: 20px;
    opacity: 0.9;
}
img{
    display: block;
    margin: auto;
}

